<template>
  <div class="permission">
    <el-card>
      <div style="text-align: right">
        <el-button @click="openAdd(1, '0')" type="primary"
          ><i class="el-icon-edit"></i>添加菜单</el-button
        >
      </div>
      <div>
        <el-table :data="list" row-key="id">
          <el-table-column label="菜单名称" prop="name"></el-table-column>
          <el-table-column label="权限标识" prop="code"></el-table-column>
          <el-table-column label="描述" prop="description"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                @click="openAdd(2, row.id)"
                type="text"
                v-if="row.type === 1"
                >添加权限点</el-button
              >
              <el-button type="text">查看api权限</el-button>
              <el-button type="text" @click="openlook(row.id)">查看</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 编辑面板 -->
      <mypanel
        ref="mypanel"
        :showDialog.sync="showDialog"
        @updateData="getAllPer"
      ></mypanel>
    </el-card>
  </div>
</template>

<script>
import { getAllPerApi, delPerAPi } from "@/api/permission";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "明明牛啊哇",
          title: "明明大手笔",
          children: [
            {
              id: 1 - 1,
              name: "明明牛1啊哇",
              title: "明明大1手笔",
            },
          ],
        },
      ],
      // 权限列表
      perList: [],
      // 控制面板的显示与隐藏
      showDialog: false,
    };
  },
  methods: {
    // 打开新增面板
    openAdd(type, pid) {
      // 调用子组件中的方法：setprop 给 type & pid 赋值
      this.$refs.mypanel.setprop(type, pid);
      // 打开面板
      this.showDialog = true;
    },
    //打开编辑面板
    openlook(id) {
      this.showDialog = true;
      //根据 id 得到权限数据
      //父组件调用子组件的函数
      this.$refs.mypanel.getObjById(id);
    },
    //删除权限
    async del(id) {
      try {
        await this.$confirm("是否删除权限", "警告");
        await delPerAPi(id);
        this.$message.success("删除成功");
        this.getAllPer();
      } catch (error) {}
    },
    // 得到所有的权限
    async getAllPer() {
      try {
        const res = await getAllPerApi();
        // 保存权限数据
        console.log(res);
        this.list = this.trunData(res.data, "0");
      } catch (error) {
        console.log(error);
      }
    },
    // 将权限列表数据转为树形结构
    trunData(arr, pid) {
      const newArr = [];
      arr.forEach((item) => {
        if (item.pid === pid) {
          const children = this.trunData(arr, item.id);
          if (children.length > 0) {
            item.children = children;
          }
          newArr.push(item);
        }
      });
      return newArr;
    },
  },
  created() {
    // 得到所有的权限
    this.getAllPer();
  },
  //注册组件
  components: {
    mypanel: () => import("./components/panel.vue"),
  },
};
</script>

<style lang="scss" scoped>
.permission {
  margin: 20px;
}
</style>